<script setup>
/**
 * 这是头部用户头像组件
 */
import { logout } from '@/store/helper.js'
import { useUserStore } from '@/store/index.js'

const userStore = useUserStore()
const router = useRouter()

function go(path, query) {
  router.push({
    path,
    query,
  })
}
</script>

<template>
  <LoginOrRegisterButton v-if="!userStore.getUserInfo" />

  <el-popover
    v-else
    :show-arrow="false"
    placement="bottom"
    :width="260"
    trigger="click"
  >
    <template #reference>
      <el-avatar class="ml-12 cursor-pointer" :src="userStore.avatar" />
    </template>
    <div class="flex-col p-8 us">
      <div class="flex items-center">
        <el-avatar :src="userStore.avatar" />
        <div class="line-clamp-1 ml-12 flex-1 font-size-18">
          {{ userStore.nickName }}
        </div>
      </div>
      <div class="mt-20 flex items-center justify-around">
        <div class="flex-col cursor-pointer items-center p-8">
          <span class="font-size-16">2</span><span class="font-size-12 op-80">关注</span>
        </div>
        <div class="flex-col cursor-pointer items-center p-8">
          <span class="font-size-16">3</span><span class="font-size-12 op-80">赞过</span>
        </div>
        <div class="flex-col cursor-pointer items-center p-8">
          <span class="font-size-16">4</span><span class="font-size-12 op-80">收藏</span>
        </div>
      </div>
      <el-divider />
      <div class="flex-col">
        <div class="flex items-center font-size-16">
          <div
            class="h-30 f-c-c flex-1 border-rd-5 cursor-pointer-bg-hover"
            @click="
              go(`/profile/user/${userStore.id}`, { title: userStore.nickName })
            "
          >
            <i class="i-fe:user mr-5" />我的主页
          </div>
          <span class="w-5" />
          <div
            class="h-30 f-c-c flex-1 border-rd-5 cursor-pointer-bg-hover"
            @click="go(`/profile/footmarks/${userStore.id}`)"
          >
            <i class="i-ion:footsteps mr-5" />我的足迹
          </div>
        </div>
      </div>
      <el-divider />
      <div class="text-align-end">
        <span class="op-80 cursor-pointer-text-hover" @click="logout">退出登录</span>
      </div>
    </div>
  </el-popover>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 18px 0;
  opacity: 0.5;
}
</style>
